<!--  -->
<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="导航配置" name="first">
        <el-form :inline="true" size="small">
          <el-button icon="el-icon-edit" type="warning" size="small" @click
            >新增</el-button
          >
        </el-form>

        <div style="margin-top: 20px">
          <el-table :data="cate_list" border stripe>
            <el-table-column type="selection" align="center" width="60" />
            <template v-for="(col, index) in columns">
              <el-table-column
                :prop="col.data"
                :key="col.id"
                :label="col.label"
                align="center"
                :width="col.width"
              ></el-table-column>
            </template>
            <el-table-column label="操作" align="center" width="170">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  icon="el-icon-edit"
                  @click="edit(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  style="color: #f56c6c"
                  @click="deleteCate(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page">
          <el-pagination
            @size-change="sizeChange"
            @current-change="currentChange"
            :current-page.sync="pageData.page"
            :page-sizes="[20, 40, 80, 100]"
            :page-size="pageData.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="基础数据配置" name="second">
        <el-form :inline="true" size="small">
          <el-form-item label="数据编号">
            <el-input
              v-model="mId"
              placeholder="请输入数据编号"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item label="数据描述">
            <el-input
              v-model="mName"
              placeholder="请输入数据描述"
              size="small"
            ></el-input>
          </el-form-item>

          <el-button icon="el-icon-search" type="primary" size="small" @click
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="small" @click>重置</el-button>
          <el-button icon="el-icon-edit" type="warning" size="small" @click
            >新增</el-button
          >
          <el-button icon="el-icon-edit" type="danger" size="small" @click
            >删除</el-button
          >
        </el-form>
        <el-row :gutter="20">
          <el-col :span="5" :offset="0">
            <div class="baseLeft">
              <el-button type="primary" size="default" @click=""
                >新增</el-button
              >
              <template v-for="(i, index) in dataList">
                <div :key="index" class="dataList">
                  <span>
                    {{ i.label }}
                  </span>
                  <el-button type="primary" size="small" @click=""
                    >编辑</el-button
                  >
                </div>
              </template>
            </div>
          </el-col>
          <el-col :span="18" :offset="0">
            <div class="baseRight">
              <el-table :data="cate_list" border stripe>
                <el-table-column
                  v-for="i in dataCol"
                  align="center"
                  :prop="i.data"
                  :key="i.id"
                  :label="i.label"
                  :width="i.width"
                >
                </el-table-column>
                <el-table-column label="操作" align="center" width="170">
                  <template slot-scope="scope">
                    <el-button
                      type="text"
                      icon="el-icon-edit"
                      @click="edit(scope.$index, scope.row)"
                      >编辑</el-button
                    >
                    <el-button
                      type="text"
                      icon="el-icon-delete"
                      style="color: #f56c6c"
                      @click="deleteCate(scope.$index, scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>

    <!-- 添加分栏 -->
    <el-dialog
      title="添加分栏"
      :visible.sync="showAdd"
      width="40%"
      @close="showAdd = false"
    >
      <el-form
        :model="createData"
        ref="form"
        :rules="rules"
        label-width="80px"
        :inline="true"
        size="normal"
      >
        <!-- <el-form-item label="标题">
          <el-input v-model="createData.title" clearable></el-input>
        </el-form-item>-->
        <el-form-item label="名称">
          <el-input v-model="createData.name" clearable></el-input>
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="createData.brief" clearable></el-input>
        </el-form-item>
        <el-form-item label="标价">
          <el-input v-model="createData.tagPrice" clearable></el-input>
        </el-form-item>
        <el-form-item label="售价">
          <el-input v-model="createData.salePrice" clearable></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input
            v-model="createData.sortOrder"
            type="number"
            step="false"
          ></el-input>
        </el-form-item>
        <el-form-item label="封面">
          <el-upload
            action
            :file="createData.cover"
            :before-upload="beforeCoverUpload"
            list-type="picture-card"
            accept="image/*"
          >
            <i class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip">
              只能上传不超过 2MB 的image/*文件
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="showAdd = false">取消</el-button>
        <el-button type="primary" @click>提交</el-button>
      </span>
    </el-dialog>

    <!-- 编辑分栏 -->
    <el-dialog
      title="添加分栏"
      :visible.sync="showEdit"
      width="40%"
      @close="showEdit = false"
    >
      <el-form
        :model="updateData"
        ref="form"
        :rules="rules"
        label-width="80px"
        :inline="true"
        size="normal"
      >
        <el-form-item label="标题">
          <el-input v-model="updateData.title" clearable></el-input>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="updateData.name" clearable></el-input>
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="updateData.brief" clearable></el-input>
        </el-form-item>
        <el-form-item label="标价">
          <el-input v-model="updateData.tagPrice" clearable></el-input>
        </el-form-item>
        <el-form-item label="售价">
          <el-input v-model="updateData.salePrice" clearable></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input
            v-model="updateData.sortOrder"
            type="number"
            step="false"
          ></el-input>
        </el-form-item>

        <el-form-item label="封面">
          <el-image
            :src="updateData.cover"
            fit="fill"
            style="width: 200px"
            :lazy="true"
          ></el-image>
          <el-upload
            action
            :file="updateData.cover"
            :before-upload="beforeCoverUpload"
            list-type="picture-card"
            accept="image/*"
          >
            <i class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip">
              只能上传不超过 2MB 的image/*文件
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="showEdit = false">取消</el-button>
        <el-button type="primary" @click>提交</el-button>
      </span>
    </el-dialog>
    <!-- 详情 -->
    <el-dialog
      title="分栏详情"
      :visible.sync="showDetail"
      width="50%"
      @close="showDetail = false"
    >
      <div class="detailLog" v-if="showDetail">
        <div>
          <span>栏目名称:</span>
          <span>{{ cate_list[i].name }}</span>
        </div>
        <div>
          <span>封面图片:</span>
          <el-image
            :src="cate_list[i].cover"
            fit="fill"
            :lazy="true"
          ></el-image>
        </div>
        <div>
          <span>缩略图:</span>
          <el-image
            :src="cate_list[i].thumbnail"
            fit="fill"
            :lazy="true"
          ></el-image>
        </div>
        <div>
          <span>栏目简介:</span>
          <span>{{ cate_list[i].brief }}</span>
        </div>
        <div class="dbox">
          <div>
            <span>等级:</span>
            <span>{{ cate_list[i].level }}</span>
          </div>
          <div>
            <span>通知:</span>
            <span>{{ cate_list[i].notice }}</span>
          </div>
          <div>
            <span>标价:</span>
            <span>{{ cate_list[i].tagPrice }}</span>
          </div>
          <div>
            <span>售价:</span>
            <span>{{ cate_list[i].salePrice }}</span>
          </div>
          <div>
            <span>创建人:</span>
            <span>{{ cate_list[i].createBy }}</span>
          </div>
          <div>
            <span>创建时间:</span>
            <span>{{ cate_list[i].createTime }}</span>
          </div>
          <div>
            <span>修改人:</span>
            <span>{{ cate_list[i].updateBy }}</span>
          </div>
          <div>
            <span>修改时间:</span>
            <span>{{ cate_list[i].updateTime }}</span>
          </div>
          <div>
            <span>状态:</span>
            <span>{{ cate_list[i].status }}</span>
          </div>
          <div>
            <span>排序:</span>
            <span>{{ cate_list[i].sortOrder }}</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  createCategory,
  categoryDetail,
  updateCategory,
  deleteCategory,
  categoryList,
} from "@/api/article";
export default {
  data() {
    return {
      activeName: "first",
      modelId: "",
      modelName: "",
      msgApi: "",
      createData: {
        title: "",
        name: "",
        cover: "",
        brief: "",
        tagPrice: "",
        salePrice: "",
        sortOrder: "",
      },
      showAdd: false,
      showEdit: false,
      showDetail: false,
      rules: {},
      i: "", //cate_id
      updateData: {
        title: "",
        name: "",
        cover: "",
        brief: "",
        tagPrice: "",
        salePrice: "",
        sortOrder: "",
      },
      pageData: {
        page: 1,
        limit: 10,
      },
      total: 10,
      cate_list: [],
      dataList: [
        { label: "城市", value: "city" },
        { label: "收入", value: "income" },
        { label: "职业", value: "profession" },
        { label: "星级", value: "star" },
      ],
      columns: [
        { key: 0, label: `编号`, data: "id", width: 80 },
        { key: 1, label: `导航图标`, data: "brief", width: 240 },
        { key: 2, label: `导航名称`, data: "name" },
        { key: 3, label: `跳转页面`, data: "name", width: 240 },
        { key: 4, label: `是否启用`, data: "content", width: 140 },
      ],

      dataCol: [
        { key: 0, label: `编号`, data: "id", width: 80 },
        { key: 1, label: `数据描述`, data: "brief" },
        { key: 2, label: `排序`, data: "name", width: 140 },
      ],
    };
  },
  created() {
    this.getCategoryList();
  },
  methods: {
    getCategoryList() {
      categoryList().then((r) => {
        if (r.code == "200") {
          this.cate_list = r.data.rows;
          console.log(this.cate_list);
        } else {
          this.$message.error(r.msg);
        }
      });
    },
    add() {},
    edit(i) {
      this.showEdit = true;
      this.updateData = this.cate_list[i];
    },
    detail(i) {
      console.log(i);
      this.i = i;
      this.showDetail = true;
    },
    createCategory() {
      createCategory(this.createData).then((r) => {});
    },
    getCategoryDetail() {
      categoryDetail().then((r) => {
        console.log(r);
      });
    },
    updateCategory(i) {
      updateCategory(this.updateData).then((r) => {
        console.log(r);
      });
    },
    deleteCate(i) {
      deleteCategory(this.cate_list[i].id).then((r) => {
        console.log(r);
      });
    },
    beforeCoverUpload() {},

    sizeChange(a) {
      this.pageData.limit = a;
      this.getCategoryList();
    },
    currentChange(a) {
      this.pageData.page = a;
      this.getCategoryList();
    },
  },
};
</script>
<style>
.sok {
  color: #5cb87a;
  width: 60px;
  margin: 0 auto;
  border: 1px solid #5cb87a;
  background: #fff;
  border-radius: 5px;
}
.sfail {
  color: #f56c6c;
  width: 60px;
  margin: 0 auto;
  border: 1px solid #f56c6c;
  background: #fff;
  border-radius: 5px;
}
.btnBox {
  height: 130px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
}
.btnBox .el-button {
  margin: 0;
}
.detailLog div {
  margin: 10px;
  color: #000;
  font-size: 16px;
}
.detailLog .dbox {
  display: flex;
  flex-wrap: wrap;
}
.detailLog .dbox > div {
  width: 46%;
  margin: 10px 0;
}
.baseLeft {
  border: 1px solid #ddd;
  min-height: 600px;
  padding: 15px;
}
.dataList{
  margin: 10px;
  display: flex;
  justify-content: space-between;
  padding: 5px 0 15px 0;
  align-items: center;
  border-bottom: 1px solid #aaa;
}
</style>
